<template>
  <div>
    <el-button type="primary" icon="el-icon-search" plain style="margin-bottom: 20px" @click="dialogSmsChoose = true">
      选择模板
    </el-button>
    <el-card shadow="hover" :body-style="{ padding: '0px' }">

      <u-table
        :data="list"
        :page="false"
        :columns="columns"
        :options="{ headerCellStyle: { background:'#FAFAFA'} }"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="remove(row)">移除</el-button>
            </template>
          </el-table-column>

        </template>
      </u-table>

    </el-card>

    <!-- 短信模板选择器 -->
    <sms v-model="dialogSmsChoose" :multiple="multiple" :data="list" @change="changeData" />

  </div>

</template>

<script>
/**
 * 业务组件 - 等级选择组件
 */
import sms from './sms'
export default {
  name: 'UesSms',
  components: {
    sms
  },
  props: {
    /** 数据源 */
    value: {
      type: Array,
      default: () => []
    },
    /** 是否多选,默认单选 */
    multiple: {
      type: Boolean,
      default: false
    },
    /** 是否选择数量,默认不显示 */
    number: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 选择的会员
      columns: [
        {
          prop: 'templateId',
          label: '模板ID'
        },
        {
          prop: 'name',
          label: '模板名称'
        },
        {
          prop: 'content',
          label: '模板内容'
        },
        {
          prop: 'type',
          label: '模板类型',
          render: (h, params) => {
            const { type } = params.row
            const title = type === 1 ? '通知' : '验证码'
            return h('el-tag', title)
          }
        }
      ],
      // 选中的等级
      list: [],
      // 短信模板选择器弹窗状态
      dialogSmsChoose: false,
      tablekey: false
    }
  },
  watch: {
    // 监听数据
    value: {
      immediate: true,
      handler(val) {
        // 初始化数据
        this.loadData(val)
      }
    }
  },
  methods: {
    // 初始化数据
    async loadData(val) {
      const self = this
      if (val) {
        if (self.list.length === 0) {
          self.list = []
          for (const v of val) {
            self.list.push(v)
          }
        } else {
          // 是否选择数量
          if (self.number) {
            // 初始化数据
            self.list.map(item => {
              item.num = item.num ? item.num : 1
            })
          }
        }
      } else {
        // console.log('初始化 -> 无数据')
        self.list = []
      }
    },
    // 通知数据更新
    change() {
      const { list } = this
      this.$emit('input', list)
      this.$emit('change', list)
    },
    // 移除会员
    remove(row) {
      const self = this
      this.$confirm('确认移除【' + row.name + '】等级吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 处理确认事件
        self.list.splice(self.list.findIndex(item => item.id === row.id), 1)
        // 通知数据更新
        self.change()
      }).catch(() => {
      })
    },
    // 监听 -> 选中变动数据
    changeData(list) {
      // 通知数据更新
      this.list = list
      this.change()
    },
    // 监听 -> input 数量
    inputChange(e, val) {
      this[val] = e
      this.tablekey = !this.tablekey
      this.change()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-input{
    width: 100% !important;
  }
}
</style>
